﻿<!--
    
 @Name：不落阁整站模板源码
 @Author：Absolutely
 @Site：http://www.lyblogs.cn

 -->
<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta name="referrer" content="no-referrer">
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <link href="LayuiBlog/images/favicon.ico"  rel="icon" type="image/x-icon" />
    <link rel="shortcut icon" href="LayuiBlog/images/favicon.ico" type="image/x-icon">
<!--    <link rel="icon" type="image/png" sizes="144x144" href="/LayuiBlog/images/sun_with_face.png"/>-->
<!--    <link rel="apple-touch-icon" type="image/png" sizes="144x144" href="/LayuiBlog/images/sun_with_face.png"/>-->
    <title>relative的个人博客</title>
    <!--Layui-->
    <link href="LayuiBlog/plug/layui/css/layui.css" rel="stylesheet"/>
    <!--font-awesome-->
    <link href="LayuiBlog/plug/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!--全局样式表-->
    <link href="LayuiBlog/css/global.css" rel="stylesheet"/>
    <!-- 本页样式表 -->
    <link href="LayuiBlog/css/home.css" rel="stylesheet"/>
    <link href="LayuiBlog/css/jqcloud.css" rel="stylesheet">
    <link rel="stylesheet" href="static/editormd/css/editormd.preview.css" />
    <!--aplayer-->
<!--    <link rel="stylesheet" href="APlayer.min.css">-->
<!--    <div id="aplayer"></div>-->
<!--    <script src="APlayer.min.js"></script>-->
    <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

    <!--页面加载start-->
    <link rel="stylesheet" type="text/css" href="/LayuiBlog/css/loader.css">
</head>
<body>



<!-- 导航 -->
<nav class="blog-nav layui-header">
    <div class="blog-container">
        <!-- QQ互联登陆 -->
        <!--            <a href="javascript:;" class="blog-user">-->
        <!--            <i class="fa fa-qq" >登录</i>-->
        <!--            </a>-->

        <!--            <a href="javascript:;" class="blog-user layui-hide">-->
        <!--                <img src="../images/Absolutely.jpg" alt="Absolutely" title="Absolutely" />-->
        <!--            </a>-->
        <!-- 不落阁 -->
        <a class="blog-logo" href="/home">relative</a>
        <!-- 导航菜单 -->
        <ul class="layui-nav" lay-filter="nav">
            <li class="layui-nav-item layui-this">
                <a href="/home"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
            </li>
            <li class="layui-nav-item">
                <a href="/article"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
            </li>
            <li class="layui-nav-item">
                <a href="/resource"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
            </li>
            <li class="layui-nav-item">
                <a href="/timeline"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
            </li>
            <li class="layui-nav-item">
                <a href="/about"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
            </li>


            <li class="layui-nav-item adminUserCss" style="float: right">
                <a id="registerwarn" href="#">注册</a>
            </li>
            <li class="layui-nav-item adminUserCss" style="float: right">
                <a href="/login">登录</a>
            </li>
        </ul>


        <!-- 手机和平板的导航开关 -->
        <a class="blog-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>

    </div>
</nav>
<!-- 主体（一般只改变这里的内容） -->
<div class="blog-body">
    <!-- canvas -->
<!--    <canvas id="canvas-banner" style="background: #393D49;"></canvas>-->
    <!--为了及时效果需要立即设置canvas宽高，否则就在home.js中设置-->
<!--    <script type="text/javascript">-->
<!--        var canvas = document.getElementById('canvas-banner');-->
<!--        canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度-->
<!--        if (screen.width >= 992) {-->
<!--            canvas.height = window.innerHeight * 1 / 3;-->
<!--        } else {-->
<!--            canvas.height = window.innerHeight * 2 / 7;-->
<!--        }-->
<!--    </script>-->
    <!-- 这个一般才是真正的主体内容 -->
    <!-- layui进度条 -->
<!--    <div class="layui-progress">-->
<!--        <div class="layui-progress-bar" lay-percent="10%"></div>-->
<!--    </div>-->
    <div class="blog-container" >
        <div><span>`</span></div>
        <div class="blog-main">
            <!-- 网站公告提示 -->
            <div class="home-tips shadow">
                <i style="float:left;line-height:17px;" class="fa fa-volume-up"></i>
                <div class="home-tips-container">
                    <span style="color: #009688">偷偷告诉大家，本博客的后台管理也正在制作，为大家准备了游客专用账号！</span>
                    <span style="color: red">网站新增留言回复啦！无需登录即可匿名留言！</span>
                    <span style="color: red">如果你觉得网站做得还不错，来Fly社区点个赞吧！<a href="http://fly.layui.com/case/2017/"
                                                                        target="_blank"
                                                                        style="color:#01AAED">点我前往</a></span>
                    <span style="color: #009688">如果方向错了，停下来就是进步</span>
                    <span id="weather"></span>
                </div>
            </div>
            <!--左边文章列表-->
            <div class="blog-main-left">
                <div class="article shadow" th:each="blog:${blogs.getList()}">
                    <div class="article-left">
                        <img th:src="${blog.getFirstPicture()}"
                             th:alt="${blog.getTitle()}"/>
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <a th:text="${blog.getTitle()}" style="font-weight: bolder;"
                               th:href="@{/detailBlog/{id}(id=${blog.getId()})}"></a>
                        </div>
                        <div class="article-abstract" th:text="${blog.getDescription()}">
                            该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法有用！
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="article-footer">
                        <i class="fa fa-clock-o"></i>
                        <span th:text="${#dates.format(blog.getUpdateTime(),'yyyy-MM-dd HH:mm:ss')}"></span>

                        <i class="fa fa-user"></i>
                        <a href="" th:href="@{/home}">
                            <span class="article-author" th:text="${blog.getUser().getUsername()}">Absolutely</span>
                        </a>
                        <span></span>
                        <i class="fa fa-paper-plane-o"></i>
                        <span>&nbsp;<a href="#" th:text="${blog.getCategory().getCategoryname()}">Web前端</a></span>

                        <i class="fa fa-tags"></i>
                        <span th:each="tag:${blog.getTags()}">
                            <a href="#" th:text="${tag.getTagname()}">Web前端</a>
                        </span>

                        <i class="fa fa-eye article-viewinfo">
                            <span class="article-viewinfo" th:text="${blog.views}" style="margin-left: 8px;font-family: Consolas"></span>
                        </i>
                        <i class="fa fa-commenting article-viewinfo">
                            <span class="article-viewinfo" th:text="${blog.getCommentnum()}" style="margin-left: 8px;font-family: Consolas">renshu</span>
                        </i>
                    </div>
                </div>
                <!-- 分页-->
                <div class="page" style="text-align: center;">
                    <span class="layui-btn layui-btn-primary"><b th:text="'共'+${blogs.getPages()}+ ' 页'"></b></span>
                    <a class="layui-btn layui-btn-sm" data-page="0"
                       th:if="${blogs.hasPreviousPage}"
                       th:href="@{/(pageNum=${blogs.isHasPreviousPage()}?${blogs.prePage}:1)}">上一页</a>
<!--                    <a href="" th:href="@{/(pageNum=1)}" class=" layui-btn layui-btn-primary">1</a>-->
<!--                    <a href="" th:href="@{/(pageNum=2)}" class="layui-btn layui-btn-primary">2</a>-->
                    <a th:if="${blogs.getPages()} gt 0" th:href="@{'home?pageNum=' + ${i}}"  th:each="i :${#numbers.sequence(1, blogs.getPages())}" th:text="${i}"  th:class="${blogs.getPageNum() == i}? 'curPage layui-btn layui-btn-primary' :'layui-btn layui-btn-primary' "></a>
                    <a href="" th:href="@{/(pageNum=${blogs.isHasNextPage()}?${blogs.nextPage}:${blogs.pages})}"
                       class="layui-btn layui-btn-sm">下一页</a>
<!--                    <a class="allpage"><b th:text="'共 '+ ${blogs.getPages()}+ ' 页'"></b></a>-->
<!--                    <a th:if="${blogs.hasPreviousPage} == true" th:href="@{'home?pageNum=' + ${blogs.prePage}}"  >上一页</a>-->
<!--                    <a th:if="${pageInfo.pages} gt 0" th:href="@{'index?currentPage=' + ${i}}"  th:each="i :${#numbers.sequence(1, pageInfo.pages)}" th:text="${i}"  th:class="${pages.pageNum == i}? 'curPage' :'' "></a>-->

<!--                    <a th:href="@{'index?currentPage=' + ${pages.nextPage}}" th:if="${pages.hasNextPage} == true">下一页</a>-->
<!--                    <a th:href="@{'index?currentPage='+ ${pages.pages}}" >尾页</a>-->
                </div>
            </div>
            <!--右边小栏目-->
            <div class="blog-main-right">
                <div class="blogerinfo shadow">
                    <div class="blogerinfo-figure">
                        <img src="LayuiBlog/images/myavatar1.png" alt="relative" style="border-radius: 50%;width: 100px"/>
                    </div>
                    <p class="blogerinfo-nickname" style="font-size: 15px">relative</p>
                    <p class="blogerinfo-introduce" style="font-family: 'Microsoft JhengHei UI';color: #1E9FFF">
                        当觉得太晚了的时候，是一切崩溃的开始</p>
                    <p class="blogerinfo-location"><i class="fa fa-location-arrow"></i>&nbsp;湖南 - 长沙</p>
                    <hr/>
                    <div class="blogerinfo-contact">
                        <a target="_blank" id="qqconnect" title="QQ交流" href="javascript:layer.msg('启动QQ会话窗口')"><i
                                class="fa fa-qq fa-2x"></i></a>
                        <a target="_blank" id="wechatconnect" title="微信联系" href="javascript:layer.msg('启动邮我窗口')"><i
                                class="fa fa-wechat fa-2x"></i></a>
                        <a target="_blank" id="githubconnect" title="Github" href="javascript:layer.msg('转到你的微博主页')"><i
                                class="fa fa-github fa-2x"></i></a>
                        <a target="_blank" id="emailconnect" title="给我写信" href="javascript:layer.msg('转到你的微博主页')"><i
                                class="fa fa-envelope fa-2x"></i></a>
                    </div>
                </div>
                <div></div><!--占位-->
                <div class="blog-module shadow">
                    <div class="blog-module-title">热文排行</div>
                    <ul class="fa-ul blog-module-ul" th:each="blog:${blogsNoFenYe}">
                        <li th:if="${blog.getViews()} ge 300"><i class="fa-li fa fa-hand-o-right"></i><a
                                                                                                        style="color: red"
                                                                                                        th:href="@{/detailBlog/{id}(id=${blog.getId()})}"
                                                                                                        th:text="${blog.getTitle()}">Web安全之跨站请求伪造CSRF</a>
                            <span style="font-size: 12px;float: right" , th:text="|阅读量${blog.getViews()}/赞|"></span>
                        </li>

                        <li th:if="${blog.getViews()} <= 300 and ${blog.getViews()} >=100 "><i class="fa-li fa fa-hand-o-right"></i><a
                                                                                                        th:href="@{/detailBlog/{id}(id=${blog.getId()})}"
                                                                                                        th:text="${blog.getTitle()}">Web安全之跨站请求伪造CSRF</a>
                            <span style="font-size: 12px;float: right" , th:text="|阅读量${blog.getViews()}/赞|"></span>
                        </li>
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">ASP.NET MVC 防范跨站请求伪造（CSRF）</a>-->
                        <!--                        </li>-->
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">常用正则表达式</a></li>-->
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">EF CodeFirst数据迁移常用指令</a></li>-->
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">浅谈.NET Framework基元类型</a></li>-->
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">C#基础知识回顾-扩展方法</a></li>-->
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">一步步制作时光轴（一）（HTML篇）</a></li>-->
                        <!--                        <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">一步步制作时光轴（二）（CSS篇）</a></li>-->
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">标签云</div>
                        <div class="widget-tag-cloud"  id="wrap" >
                            <span th:each="tag:${tags}" >
                            <a href="" th:href="@{/tag/{id}(id=${tag.getTagid()})}" th:text="${tag.getTagname()}"></a>
                            </span>
                        </div>



                    <!--                       <a th:href="@{/de}" th:text="123"></a> -->


                </div>


                <div class="blog-module shadow">
                    <div class="blog-module-title">一路走来(最近三条)</div>
                    <div class="footprint" th:each="mem:${memmory}" >
                        <dt th:text="${#dates.format(mem.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">2017年03月12日</dt>
                        <dd th:utext="${mem.getMemoryContent()}">新增留言回复功能！人人都可参与回复！</dd>
                    </div>
                </div>

                <div class="blog-module shadow">
                    <div class="blog-module-title">友情链接</div>
                    <ul class="blogroll">
                        <li><a target="_blank" href="http://www.layui.com/" title=oo"Layui">Layui</a></li>
                        <li><a target="_blank" href="http://www.pagemark.cn/" title="页签">页签</a></li>
                    </ul>
                </div>
                <div class="blog-module shadow">
                    <div class="blog-module-title">网站信息</div>
                    <ul class="blogroll">
<!--                        <li><a target="_blank" href="http://www.layui.com/" title=oo"Layui">Layui</a></li>-->
<!--                        <li><a target="_blank" href="http://www.pagemark.cn/" title="页签">页签</a></li>-->
<!--                        <span id="span"></span>-->
<!--                        <script type="text/javascript">function runtime(){// 初始时间，日/月/年 时:分:秒-->
<!--                            X = new Date("4/18/2020 8:32:00");-->
<!--                            Y = new Date();-->
<!--                            T = (Y.getTime()-X.getTime());-->
<!--                            M = 24*60*60*1000;-->
<!--                            a = T/M;-->
<!--                            A = Math.floor(a);-->
<!--                            b = (a-A)*24;-->
<!--                            B = Math.floor(b);-->
<!--                            c = (b-B)*60;-->
<!--                            C = Math.floor((b-B)*60);-->
<!--                            D = Math.floor((c-C)*60);//信息写入到DIV中-->
<!--                            span.innerHTML = "本站勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}setInterval(runtime, 1000);-->
<!--                            -->
<!--                        </script>-->
                        <span style="font-family: 'Microsoft JhengHei'">本站已勉强运行:<i class="fa fa-wifi"></i></span>
                        <span id="momk"></span>
                        <script language=javascript>
                            function show_date_time(){
                                window.setTimeout("show_date_time()", 1000);
                                BirthDay=new Date("05-06-2020 00:00:00");//建站日期
                                today=new Date();
                                timeold=(today.getTime()-BirthDay.getTime());
                                sectimeold=timeold/1000
                                secondsold=Math.floor(sectimeold);
                                msPerDay=24*60*60*1000
                                e_daysold=timeold/msPerDay
                                daysold=Math.floor(e_daysold);
                                e_hrsold=(daysold-e_daysold)*-24;
                                hrsold=Math.floor(e_hrsold);
                                e_minsold=(hrsold-e_hrsold)*-60;
                                minsold=Math.floor((hrsold-e_hrsold)*-60);
                                seconds=Math.floor((minsold-e_minsold)*-60);
                                momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
                            }
                            show_date_time();
                        </script>
                        <style>
                            #momk{animation:change 10s infinite;font-family: Consolas }
                            @keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
                        </style>
                        <ul style="margin-top: 10px">
                            <li>
                            <i class="fa fa-file-text fa-fw"></i><span class="site-default-word" >文章总数</span>：<span th:text="|${blogsnum} 篇|"></span>
                            </li>
                            <li>
                                <i class="fa fa-tags fa-fw"></i><span class="site-default-word">标签总数</span>：<span th:text="|${tagsnum} 个|"></span>
                            </li>
                            <li>
                                <i class="fa fa-comments fa-fw"></i><span class="site-default-word">留言总数</span>：<span th:text="|${commentsnum2} 条|"></span>
                            </li>
                            <li>
                                <i class="fa fa-commenting-o fa-fw"></i><span class="site-default-word">评论总数</span>：<span th:text="|${commentsnum1} 条|"></span>
                            </li>
                            <li>
                                <i class="fa fa-pencil fa-fw"></i><span class="site-default-word">网站最后更新</span>：<span class="siteUpdateTime" style="display: block;">2020年5月5日18点</span>
                            </li>
                        </ul>
                        <br/>

                        <iframe width="225" scrolling="no" height="80" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=8&color=%23&bdc=%23&icon=3&num=3&site=12"></iframe>
                        <div class="report">
                            <script>
                                var weekDayLabels = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
                                var now = new Date();
                                var year=now.getFullYear();
                                var month=now.getMonth()+1;
                                var day=now.getDate()
                                var currentime = '<span class="special">'+year+'年'+month+'月'+day+'日                '+weekDayLabels[now.getDay()]+'</span><br>'
                                document.write(currentime)
                            </script>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer class="blog-footer">
<!--    <p><span>Copyright</span><span>&copy;</span><span>2017</span><a href="http://www.lyblogs.cn">不落阁</a><span>Design By LY</span>-->
<!--    </p>-->
<!--    <p><a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备16029915号-1</a></p>-->
</footer>
<!--侧边导航-->
<ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
    <li class="layui-nav-item">
        <a th:href="@{/home}"><i class="fa fa-home fa-fw"></i>网站首页</a>
    </li>
    <li class="layui-nav-item layui-this">
        <a th:href="@{/article}"><i class="fa fa-file-text fa-fw"></i>文章专栏</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/resource}"><i class="fa fa-tags fa-fw"></i>资源分享</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{timeline}"><i class="fa fa-road fa-fw"></i>点点滴滴</a>
    </li>
    <li class="layui-nav-item">
        <a th:href="@{/about}"><i class="fa fa-info fa-fw"></i>关于本站</a>
    </li>
</ul>
<!--分享窗体-->
<div class="blog-share layui-hide">
    <div class="blog-share-body">
        <div style="width: 200px;height:100%;">
            <div class="bdsharebuttonbox">
                <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
            </div>
        </div>
    </div>
</div>
<div class="demo">
    <div id="player">
    </div>
</div>


<!--遮罩-->
<div class="blog-mask animated layui-hide"></div>
<!-- layui.js -->
<script src="LayuiBlog/plug/layui/layui.js"></script>
<!-- 全局脚本 -->
<!--<script  src="LayuiBlog/js/global.js"></script>-->
<script src="LayuiBlog/js/global.js"></script>
<!-- 本页脚本 -->
<script src="LayuiBlog/js/home.js"></script>
<script src="LayuiBlog/js/BGM.js"></script>
<!--引入Jquery和wordcloud-->
<script src="LayuiBlog/js/jquery-min.js" type="text/javascript"></script>
<!--<script src="LayuiBlog/js/wordcloud2.js"></script>-->
<script type="text/javascript">
    $(document).ready(function () {
        var obj = $("#wrap a");//获取a标签中的数据

        function rand(num) {
//parseInt();将字符串转为整数
//Math.random()；生成随机数
            return parseInt(Math.random() * num + 1);
        }

        function randomcolor() {
            var str = Math.ceil(Math.random() * 16777215).toString(16);
            if (str.length < 6) {
                str = "0" + str;
            }
            return str;
        }

        for (len = obj.length, i = len; i--;) {
            obj[i].style.left = rand(20) + "px";//标签左右间距
            obj[i].style.top = rand(30) + "px";//标签上下间距
            obj[i].className = "color" + rand(5);
            obj[i].style.zIndex = rand(5);//设置元素的堆叠顺序
            obj[i].style.fontSize = rand(5) + 15 + "px";//随机字体大小这里是10-20
            obj[i].style.color = "#" + randomcolor();//字体颜色
            obj[i].style.padding = rand(10) + "px";
        }
    });

</script>

<script src="LayuiBlog/js/jqcloud-1.0.4.min.js" ></script>
<script>
    var tips;
    var layer = layui.layer;
    $('#qqconnect').on({
        mouseover: function () {
            tips = layer.tips('<img src="LayuiBlog/images/qq.jpg" style="width:120px;height:120px;"/ >', this, {
                tips: 1,
                time: 0
            })
        },
        mouseout: function () {
            layer.close(tips);
        }
    });

    $('#wechatconnect').on({
        mouseover: function () {
            tips = layer.tips('<img src="LayuiBlog/images/wechat.png" style="width:120px;height:120px;"/ >', this, {
                tips: 1,
                time: 0
            })
        },
        mouseout: function () {
            layer.close(tips);
        }
    })
    $('#githubconnect').on({
        mouseover: function () {
            tips = layer.tips('去留言~', this, {
                tips: 1,
                time: 0
            })
        },
        mouseout: function () {
            layer.close(tips);
        }
    })
    $('#emailconnect').on({
        mouseover: function () {
            tips = layer.tips('去我的微博~', this, {
                tips: 1,
                time: 0
            })
        },
        mouseout: function () {
            layer.close(tips);
        }
    })
</script>


</body>
</html>